// 中间表单里面的当个组件
<template>
    <!-- 添加动画效果  -->
    <transition name="animtodo">
        <li>
            <label>
                <!-- 给input增加一个 :checked，动态绑定数据 -->
                <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
                <span v-show="!todo.isEdit">{{todo.title}}</span>
                <!-- 编辑状态显示文本框 -->
                <input v-show="todo.isEdit" 
                    type="text" 
                    :value="todo.title"
                    @blur="handleBlur(todo,$event)"
                    ref="inputitle">     <!-- 文本框失去焦点blur -->
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
            <button class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
        </li>
    </transition>
</template>

<script>
// 引入第三方库 消息订阅使用
import pubsub from 'pubsub-js'
export default {
    name:'Item',
    // 接收外部数据 todo是从Llst组件传进来的数据
    props:['todo'],
    // props:['todo','CheckTodo','deleteTodo'],
    methods:{
        // 点击多选框触发的函数
        handleCheck(id){
            // this.CheckTodo(id)   //这个函数是从外部接收进来的 通过这个函数来修改多选框的true和false
            this.$bus.$emit('handleCheck',id)   //触发全局事件总线绑定的自定义事件，传递数据
        },
        // 是否要删除
        handleDelete(id){
            if(confirm('是否确认删除？'))
            {
                // this.deleteTodo(id)
                // this.$bus.$emit('deleteTodo',id)   //触发全局事件总线绑定的自定义事件，传递数据
                pubsub.publish('deleTodo',id)   //发送消息
            }
        },
        // 处理编辑
        handleEdit(todo){
            // 给todo数组添加一个编辑属性
            // 判断todo身上是否有isEdit属性
            // if(todo.hasOwnProperty('isEdit'))
            // {
            //     todo.isEdit = true   //有这个属性就直接改成ture
            // }
            // else{
                this.$set(todo,'isEdit',true)  //没有这个属性就添加一个，值为true
            //}

            // 点击编辑后直接获得焦点 this.$nextTick 下一次更新模板前调用
            this.$nextTick(function(){
                this.$refs.inputitle.focus()
            })
        },
        // 文本框失去焦点 恢复文本模样
        handleBlur(todo,e){
            todo.isEdit = false
            if(!e.target.value.trim()) return alert("输入内容不能为空")
            // 传递新的title数据
            this.$bus.$emit('updateTodo',todo.id,e.target.value)
        }
    }
}
</script>

<style scoped>
    li{
        list-style-type: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }
    li label{
        float: left;
        cursor: pointer;
    }
    li label li input{
        vertical-align: middle;
        margin-right:6px;
        position: relative;
        top: -1px;
    }
    li button{
        float: right;
        display: none;
        margin-top: 3px;
    }
    li:before{
        content: initial;
    }
    li:last-child{
        border-bottom: none;
    }
    li:hover{
        background-color:#ddd;
    }
    li:hover button{
        display: block;
    }
    .animtodo-enter,.animtodo-leave-to{       /* 来的时候动画的改变起点，离开的时候动画的终点是同一个 */
        transform: translateX(-100%);
    }
    .animtodo-enter-active,.animtodo-leave-active{     /* 播放动画 */
        transition: 0.5s linear;
    }
    .animtodo-enter-to,.animtodo-leave{ /* 来的时候动画的终点，离开的时候动画改变起点是同一个 */
        transform: translateX(0);
    }
</style>